<template>
  <div class="app-container">
	  <el-row style="margin-bottom: 30px;">
		<el-col :span="2"><p>&nbsp;</p></el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-green"></div></el-col>
				<el-col :span="10">空闲</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-yellow"></div></el-col>
				<el-col :span="10">待确认</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-red"></div></el-col>
				<el-col :span="10">已预约</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-purple"></div></el-col>
				<el-col :span="12">未通过/不可预约</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-purple2"></div></el-col>
				<el-col :span="10">预约记录</el-col>
			</el-row>
		</el-col>
	  </el-row>
		
		<el-row style="margin-bottom: 10px;">
			<el-col :span="3"><div style="min-height: 24px;"></div></el-col>
			<el-col :span="5">
				
				<el-button-group>
				  <el-button plain icon="el-icon-arrow-left" @click="getPerWeek"></el-button>
				  <el-button plain @click="getNextWeek"><i class="el-icon-arrow-right el-icon--right" ></i></el-button>
				  <el-button plain @click="getNowDate()">返回今天</el-button>
				</el-button-group>
			</el-col>
			
			<el-col :span="15">
				
				
				<el-form size="small" :inline="true" v-show="showSearch" label-width="68px">
				<el-form-item prop="selectDate">
				<el-date-picker clearable
				  v-model="selectDate"
				  type="date"
				  :clearable="false"
				  value-format="yyyy-MM-dd"
				  placeholder="">
				</el-date-picker>
				</el-form-item>
				<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				 <!-- el-button type="warning" size="mini" @click="resetQuery">批量新增 -->
				</el-form-item>
				</el-form>
			</el-col>
		</el-row>
        <el-row >
          <el-col :span="3" class="grid-col-frist">
			<!--div class="grid-tea bg-tea" :class="teaUserName==''?'on':''" @click="changeTea('')">全部</div -->
			<div class="grid-tea bg-tea" v-for="(item, index) in tealist" :class="teaUserName==item.userName?'on':''" @click="changeTea(item.userName)">{{item.nickName}}</div>
		  </el-col>
          <el-col :span="3" v-for="(item, index) in dates" class="grid-col" >
			  <div class="grid-header bg-header">{{item.name}}</div>
			  
			  <div class="grid-content" :class="item2.state==9?'bg-green':item2.state == 0 ? 'bg-yellow' : item2.state == 1 ?'bg-red': item2.state == 2 || item2.state == 3  ? 'bg-purple' : 'bg-purple2'"
				@click="handleAdd(item2)" v-for="(item2, index2) in appointmentList" v-if="item2.schedulingDate==item.date">{{item2.startTime}}-{{item2.endTime}}</div>
		  </el-col>
        </el-row>

    <!-- 添加或修改我的预约对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="data.nickName" placeholder="" disabled/>
        </el-form-item>
        <el-form-item label="登录名" prop="myUserName">
          <el-input v-model="data.myUserName" placeholder="" disabled/>
        </el-form-item>
		<el-form-item label="性别" prop="sex">
		  <el-input v-model="data.sex" placeholder="" disabled/>
		</el-form-item>
		<el-form-item label="咨询方式" prop="serviceType">
		  <el-input v-model="data.serviceType" placeholder="" disabled/>
		</el-form-item>
		<div v-if="data.serviceType != '个体咨询（线上）' && data.serviceType != '个体咨询（线下）'">
		<el-form-item label="主题" prop="subjectName">
		  <el-input v-model="data.subjectName" placeholder="" disabled/>
		</el-form-item>
		<el-form-item label="内容" prop="content">
		  <el-input v-model="data.content" placeholder="" disabled/>
		</el-form-item>
		<el-form-item label="报名条件" prop="enrollConditions">
		  <el-input v-model="data.enrollConditions" placeholder="" type="textarea" disabled :autosize="{ minRows: 3}"/>
		</el-form-item>
		</div>
		<el-form-item label="问题类型" prop="qaTypeId" v-if="data.qaTypeId">
		  <el-input v-model="data.typeName" placeholder="" disabled/>
		</el-form-item>
		<el-form-item label="问题类型" prop="typeName" v-else>
		  <el-select v-model="form.qaTypeName" name="qaTypeName" @change="qaTypeNameChange">
			  <el-option label="不限" value="0" selected></el-option>
		      <el-option v-for="(item,idx) in qaTypeList" 
		      :label="item.typeName" 
		      :value="item.qaTypeId"
		      :key="idx"
		      ></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="服务地点" prop="serviceAddress" v-if="data.serviceType != '个体咨询（线上）' && data.serviceType != '团体咨询（线上）'">
		  <el-input v-model="data.serviceAddress" placeholder="" disabled/>
		</el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="问题详情">
		  <el-input v-model="form.content" placeholder="请输入问题详情" type="textarea" :autosize="{ minRows: 3}"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">预 约</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
	
	<!-- 添加或修改我的预约对话框 -->
	<el-dialog :title="title2" :visible.sync="open2" width="500px" append-to-body>
		<el-row  class="drow">
		  <el-col :span="5" class="dcol">咨询方式：</el-col>
		  <el-col :span="15" class="dcol" v-if="data.scheduling">{{data.scheduling.serviceType}}</el-col>
		</el-row>
		<el-row class="drow">
		  <el-col :span="5" class="dcol">问题类型：</el-col>
		  <el-col :span="15" class="dcol">{{data.typeName? data.typeName: '不限'}}</el-col>
		</el-row>  
		<div v-if="data.scheduling && data.scheduling.serviceType != '个体咨询（线上）' && data.scheduling.serviceType != '个体咨询（线下）'">
			<el-row class="drow">
			  <el-col :span="5" class="dcol">主题：</el-col>
			  <el-col :span="15" class="dcol">{{data.scheduling.subjectName}}</el-col>
			</el-row> 
			<el-row class="drow">
			  <el-col :span="5" class="dcol">内容：</el-col>
			  <el-col :span="15" class="dcol">{{data.scheduling.content}}</el-col>
			</el-row> 
			<el-row class="drow">
			  <el-col :span="5" class="dcol">报名条件：</el-col>
			  <el-col :span="15" class="dcol">{{data.scheduling.enrollConditions}}</el-col>
			</el-row> 
			<el-row class="drow">
			  <el-col :span="5" class="dcol">服务地点：</el-col>
			  <el-col :span="15" class="dcol">{{data.scheduling.serviceAddress}}</el-col>
			</el-row> 
		</div>
		<el-row class="drow" v-if="data.scheduling && data.scheduling.serviceType != '个体咨询（线上）' && data.scheduling.serviceType != '团体咨询（线上）'">
		  <el-col :span="5" class="dcol">服务地点：</el-col>
		  <el-col :span="15" class="dcol">{{data.scheduling.serviceAddress}}</el-col>
		</el-row> 
		<el-row class="drow">
		  <el-col :span="5" class="dcol">联系方式：</el-col>
		  <el-col :span="15" class="dcol">{{data.mobile}}</el-col>
		</el-row> 
			  
		  <el-row class="drow">
			<el-col :span="5" class="dcol">问题详情：</el-col>
			<el-col :span="15" class="dcol">{{data.content}}</el-col>
		  </el-row> 
	  
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="cancel">取 消</el-button>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
import { listAppointment, getAppointment, delAppointment, addAppointment, updateAppointment, getScheduling } from "@/api/consult/appointment";

import { selectQaType, selectTeacherList, selectDate, selectNowDate, perWeek, nextWeek } from "@/api/consult/common";

export default {
  name: "Appointment",
  data() {
    return {
	  dates: [],
	  selectDate: '',
	  tealist: [],
	  teaUserName: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
	  qaType: '',
	  qaTypeList: [],
      // 我的预约表格数据
      appointmentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        teaUserName: null,
		params: {
			startDate: '',
			endDate: ''
		}
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        mobile: [
          { required: true, message: "联系方式不能为空", trigger: "blur" }
        ]
      },
	  open2: false,
	  title2: '查看',
	  data: {
		  
	  }
    };
  },
  created() {
	  //console.log(this.$store.state.user)
	this.getQaTypeList();
	this.selectTeacherList();
    //this.getList();
  },
  methods: {
	  getQaTypeList() {
	    selectQaType().then(response => {
	      this.qaTypeList = response.data;
	    });
	  },
	  qaTypeNameChange(val) {
		  console.log(val)
		  this.qaType = val;
	  },
	selectTeacherList() {
		selectTeacherList().then(response => {
			this.tealist = response.data;
			//console.log(response)
			this.teaUserName = this.tealist[0].userName;
			this.getNowDate();
		});
	},  
	getNowDate() {
		selectNowDate().then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	getPerWeek() {
		if(this.selectDate)
		perWeek(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	getNextWeek() {
		if(this.selectDate)
		nextWeek(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	handleQuery() {
		if(this.selectDate)
		selectDate(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	changeTea(userName) {
		this.teaUserName = userName;
		this.getList();
	},
    /** 查询我的预约列表 */
    getList() {
      this.loading = true;
	  this.queryParams.params.teaUserName = this.teaUserName;
	  this.queryParams.params.startDate = this.dates[0].date;
	  this.queryParams.params.endDate = this.dates[6].date;
      listAppointment(this.queryParams).then(response => {
        this.appointmentList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
	  this.open2 = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        myAppointmentId: null,
        schedulingId: null,
        userName: null,
        mobile: null,
        content: null,
        createTime: null
      };
      this.resetForm("form");
    },
	handleView(id) {
		getAppointment(id).then(response => {
		  this.data = response.data;
		  this.title2 = response.data.scheduling.serviceType
		  this.open2 = true;
		});
	},
    /** 新增按钮操作 */
    handleAdd(item) {
		console.log(item)
		let state = item.state;
		let id = item.myAppointmentId ;
		let sid = item.schedulingId;
	  if(state == 9) { // 空闲，添加预约
		  this.reset();
		  getScheduling(sid).then(response => {
		    this.open = true;
		    this.title = response.data.serviceType ;
			this.qaType = response.data.qaTypeId;
			this.data = response.data;
			this.data.nickName = response.data.params.user.nickName;
			this.data.myUserName = response.data.params.user.userName;
			this.data.sex = response.data.params.user.sex == 2 ? '女' : '男'
		  });
		  
	  } else if(state >= 0 && state <= 2) {
		  this.handleView(id);
	  } 
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
			console.log(this.data.schedulingId)
			this.form.schedulingId = this.data.schedulingId;
			this.form.qaTypeId = this.qaType;
          addAppointment(this.form).then(response => {
			  if(response.code==200) {
				  this.$modal.msgSuccess("预约成功");
				  this.open = false;
				  this.getList();
			  } else {
				  this.$modal.msgSuccess("预约失败，请刷新重试");
			  }
            
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const myAppointmentIds = row.myAppointmentId || this.ids;
      this.$modal.confirm('是否确认删除我的预约编号为"' + myAppointmentIds + '"的数据项？').then(function() {
        return delAppointment(myAppointmentIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }
};
</script>

<style>
	.bg-header {
		background:  rgb(64, 158, 255);
		color: #ffffff;
	}
	.grid-header {
		text-align: center;
		padding: 10px;
	}
	.grid-content {
		text-align: center;
		padding: 5px;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		border-radius:5px;
		cursor: pointer;
	}
	.grid-bg {
		min-height: 24px;
	}
	.bg-green {
		background: #67C23A;
		color:#ffffff;
	}
	.bg-yellow {
		background: #E6A23C;
		color:#ffffff;
	}
	.bg-red {
		background: #F56C6C;
		color:#ffffff;
	}
 .bg-purple {
	background: #909399;
	color:#000;
  }
  .bg-purple2 {
	  background: #f5f7fa;
	  color:#000;
	  border: 1px solid #000
  }
  .grid-col-frist {
	  height: 700px;
	  border-right: 1px solid #ccc;
	  overflow-y: auto;
  }
  .grid-col {
	  height: 700px;
	  border-right: 1px solid #ccc;
  }
  
  .grid-tea{
	  text-align: center;
	  padding: 10px;
	  margin-right: 5px;
	  color:#ffffff;
	  cursor: pointer;
  } 
  .bg-tea {
	  background:  rgb(64, 158, 255);
  }
  .bg-tea.on {
	  background:  royalblue;
  }
  .drow {
	  margin-bottom: 20px;
	  
  }
  .dcol {
	  font-size: 18px;
  }
</style>
